<template>
	<view class="select-interval-or-site">
		<navBar title="区间/站点"  @goBack="uni.navigateBack()"></navBar>
		
		<scroll-view scroll-y :style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			<view style="height: 100%;">
				<view class="search">
					<u-search @search="getIntervalSiteArray" @change="getIntervalSiteArray" v-model="searchForm.keyWord" placeholder="请输入关键字" :showAction="false" clearabled height="88upx" />
				</view>

				<u-checkbox-group v-model="currentIntervalOrSiteArray">
					<view class="interval-or-site-list">
						<view @click.stop="clickTreeItem(index)" v-for="(item, index) in intervalOrSiteArray" :key="index">
							<view class="list-item">
								<text>{{`${item.name}${item.branchLineName ? '(' + item.branchLineName + ')' : ''}`  || ""}}</text>
								<u-icon :name="item.showChildren ? 'arrow-down' : 'arrow-right'" color="#a7aebd" size="18" style="margin-right: 32upx;"></u-icon>
							</view>
							
							<view v-if="item.list" v-show="item.showChildren">
								<view @click.stop="clickTreeItem(index, index1)" v-for="(item1, index1) in item.list" :key="index1">
									<view class="list-item list-item-2">
										<text>{{item1.name}}</text>
										<u-icon :name="item1.showChildren ? 'arrow-down' : 'arrow-right'" color="#a7aebd" size="18" style="margin-right: 32upx;"></u-icon>
									</view>
									
									<view v-if="item1.list" v-show="item1.showChildren">
										<view @click.stop="clickTreeItem(index, index1, index2)" v-for="(item2, index2) in item1.list" :key="index2">
											<view class="list-item list-item-3">
												<text>{{item2.name}}</text>
												<view v-if="type">
													<u-checkbox size="22" shape="circle" :name="JSON.stringify(item2)"></u-checkbox>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
				
				<view v-if="type" class="footer-button">
					<view class="button-placeholder"></view>
					
					<view class="button-group">
						<view @click="clickConfirmBtn" :loading="isLoading" class="button-primary">确定</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { getIntervalSiteList } from "@/api/engineeringMaintenance/engineeringMaintenance.js";
	
	export default {
		name: "select-interval-or-site",
		data() {
			return {
				// 当前类型 - 0: 单选  1: 多选
				type: 0,
				// 项目id
				projectId: 0,
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 区间站点列表数据
				intervalOrSiteArray: [],
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
				// 当前选择的区间站点列表
				currentIntervalOrSiteArray: [],
			}
		},
		onLoad(options) {
			this.type = parseInt(options.type);
			this.projectId = parseInt(options.projectId);
			if (options.code) {
				this.code = options.code
			}
			this.initContainerData();
			this.getIntervalSiteArray();
			
			// 如果是多选 - 判断是否回显
			if(this.type === 1) {
				if(uni.getStorageSync("_temp_select_interval_or_site")) {
					this.currentIntervalOrSiteArray = uni.getStorageSync("_temp_select_interval_or_site").map(item => JSON.stringify(item));
					uni.removeStorageSync("_temp_select_interval_or_site");
				}
			}
		},
		methods: {
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight;
			},
			
			/** 获取区间站点数据 */
			getIntervalSiteArray() {
				getIntervalSiteList({
					objId: this.projectId,
					objType: this.code ? this.code : (this.type ? "gcwb" : "zhdx"),
					keyWord: this.searchForm.keyWord,
				}).then(res => {
					let tempArray = res.result;
					
					for(const index in tempArray) {
						if(tempArray[index].list) {
							for(const index1 in tempArray[index].list) {
								if(tempArray[index].list[index1].list) {
									for(const index2 in tempArray[index].list[index1].list) {
										tempArray[index].list[index1].list[index2] = {
											...tempArray[index].list[index1].list[index2],
											lineId: tempArray[index].id,
											lineName: tempArray[index].name,
											lineSiteSectionType: tempArray[index].list[index1].id,
											lineSiteSectionId: tempArray[index].list[index1].list[index2].id,
											lineSiteSectionName: tempArray[index].list[index1].list[index2].name,
										};
									}
								}
							}
						}
					}
					this.intervalOrSiteArray = tempArray;
				});
			},
			
			/** 点击树数据的某一项 */
			clickTreeItem(...indexs) {
				if(indexs.length === 1) {
					this.$set(this.intervalOrSiteArray, indexs[0], {...this.intervalOrSiteArray[indexs[0]], showChildren: !this.intervalOrSiteArray[indexs[0]].showChildren});
				}
				else if(indexs.length === 2) {
					this.$set(this.intervalOrSiteArray[indexs[0]].list, indexs[1], {...this.intervalOrSiteArray[indexs[0]].list[indexs[1]], showChildren: !this.intervalOrSiteArray[indexs[0]].list[indexs[1]].showChildren});
				}
				else if(indexs.length === 3 && this.type === 0) {
					uni.setStorageSync("_temp_select_interval_or_site", [this.intervalOrSiteArray[indexs[0]].list[indexs[1]].list[indexs[2]]]);
					uni.navigateBack();
				}
			},
			
			/** 点击确认按钮 */
			clickConfirmBtn() {
				uni.setStorageSync("_temp_select_interval_or_site", this.currentIntervalOrSiteArray.map(item => JSON.parse(item)));
				uni.navigateBack();
			},
		}
	}
</script>

<style scoped lang="scss">
	.select-interval-or-site {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}
		
		.u-checkbox-group {
			display: block;
		}
		
		.interval-or-site-list {
			width:100%;
			padding: 0 36upx 0 28upx;
			color: #445469;
			font-weight: 500;
			
			.list-item {
				padding: 40upx;
				border-bottom: 1px solid #e2e5ed;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.list-item-2 {
				padding-left: 100upx;
			}
			
			.list-item-3 {
				padding-left: 0;
				margin-left: 38upx; 
				font-size: 32upx;
				font-weight: 500;
			}
			
			::v-deep .u-radio__icon-wrap {
				margin-right: 30upx;
			}
		}
	}
	
	.footer-button {
		height: 154upx;
		
		.button-placeholder {
			height: 100%;
		}
		
		.button-group {
			height: 154upx; 
			padding: 30upx; 
			box-sizing: border-box; 
			background: #fff; 
			position: fixed; 
			width: 100vw; 
			bottom: 0; 
			z-index: 1;
			
			.button-primary {
				background: #2f80ed; 
				border-radius: 4upx; 
				color: #fff; 
				font-weight: bold; 
				line-height: 92upx; 
				text-align: center;
			}
		}
	}
</style>
